<template>
  <div class="game">
    <h2>游戏列表</h2>
    <slot a="哈哈" b="嘿嘿" c="拉拉" :games="games"></slot>
    <!-- <person a="哈哈"></person> -->
  </div>
</template>

<script>
  export default {
    name:'Game',
    data() {
      return {
        games:[
          {id:'12r65r6201',name:'英雄联盟'},
          {id:'12r65r6202',name:'穿越火线'},
          {id:'12r65r6203',name:'原神'},
          {id:'12r65r6204',name:'我的世界'},
          {id:'12r65r6205',name:'流星蝴蝶剑'},
          {id:'12r65r6206',name:'跑跑卡丁车'},
          {id:'12r65r6207',name:'植物大战僵尸'},
        ]
      }
    },
  }
</script>

<style scoped>
  .game {
    width: 300px;
    height: 400px;
    background-color: skyblue;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px;
  }
  h2 {
    text-align: center;
  }
</style>